<template>
  <div class="form-container">
    <div class="tip-info-box">
      <div class="tip-info">
        <img src="../assets/fire.png" alt="" />
        <span>已有</span>
        <span class="num-tab">299</span>
        <span>人参加</span>
      </div>
    </div>

    <div class="form-item">
      <p>称呼<i>*</i></p>
      <input v-model="name" type="text" />
    </div>
    <div class="form-item">
      <p>电话<i>*</i></p>
      <input v-model="phone" type="number" />
    </div>
    <div class="form-item">
      <button class="sub-btn" @click="handleForm">提交咨询</button>
    </div>
  </div>
</template>

<script>

export default {
  name: "SubForm",
  data() {
    return {
      name: '',
      phone: ''
    }
  },
  methods: {
    handleForm() {
      if(this.name === '') {
        alert('请输入你的称呼')
        return;
      }
      if(this.phone === '') {
        alert('请输入你的手机号码')
        return;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.form-container {
  width: 100%;
  margin-top: 20px;
  padding-bottom: 30px;
  .tip-info-box {
    width: 100%;
    display: flex;
    justify-content: center;
    .tip-info {
      width: 50%;
      color: #e6322e;
      background-color: rgba(230, 50, 46, 0.05);
      padding: 6px 14px;
      border-radius: 1rem;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 18px;
        margin-right: 4px;
      }
      span {
        &.num-tab {
          display: inline-block;
          padding: 2px 14px;
          margin: 0 8px;
          border-radius: 0.38rem;
          background-image: -webkit-linear-gradient(
            45deg,
            #e6322e,
            rgb(255, 26, 97)
          );
          color: #fff;
          font-weight: 600;
        }
      }
    }
  }

  .form-item {
    margin-top: 20px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 14px;
    p {
      margin: 0;
      font-size: 14px;
      i {
        color: #e6322e;
      }
    }
    input {
      margin-top: 8px;
      width: 100%;
      font-size: 1rem;
      padding: 8px 0;
    }

    @keyframes btnScale {
      0% {
        transform: scale(1);
      }
      14% {
        transform: scale(0.95);
      }
      42% {
        transform: scale(1.05);
      }
      66% {
        transform: scale(1);
      }
      100% {
        transform: scale(1);
      }
    }
    .sub-btn {
      width: 100%;
      color: #fff;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 1.5rem;
      background-image: -webkit-linear-gradient(
        45deg,
        rgb(230, 50, 46),
        rgb(255, 25, 98)
      );
      border: none;
      padding: 14px 0;

      animation: btnScale 3s linear infinite forwards;
    }
  }
}
</style>